<template>
  <div class="confirmOrderContainer">
    <section v-if="!showLoading">
      <head-top head-title="确认订单" goBack="true" signin-up="confirmOrder"></head-top>
      <section class="pay_way container_style">
        <header class="header_style">
          <span>支付方式</span>
          <div class="more_type">
            <span>余额支付</span>
          </div>
        </header>
      </section>
      <section class="food_list">
        <header>
          <!-- <img :src="myImgBaseUrl + shopImg"> -->
          <span>多田餐厅</span>
        </header>
        <ul class="food_list_ul">
          <li v-for="(item, index) in foodList" :key="index" class="food_item_style" style="margin-bottom: 0.5rem">
            <img :src="item.stock" style="width: 1.5rem; height: 1.5rem; margin-right: 0.3rem" />
            <p class="food_name ellipsis">{{ item.name }}</p>
            <div class="num_price">
              <span style="font-weight: bold">x {{ item.num }}</span>
              <span style="font-weight: bold">¥{{ item.price*item.num }}</span>
            </div>
          </li>
        </ul>
        <div class="food_item_style total_price">
          <p class="food_name ellipsis">
            <!-- 订单 ¥{{totalMoney}} -->
          </p>
          <div class="num_price">
            <span class="totalMoney" style="font-weight: bold">待支付 ¥{{ waitPay.toFixed(2) }}</span>
          </div>
        </div>
      </section>
      <section class="pay_way container_style">
        <div class="int">
          <div class="intTitle">备注</div>
          <textarea class="intTextArea" v-model="inputInt" placeholder="请输入备注内容(可不填)"></textarea>
        </div>
      </section>
      <section class="confrim_order">
        <p style="float: right">
          <span style="color: #000; font-weight: bold; font-size: 14px">合计:</span>
          <span style="color: red; font-weight: bold; font-size: 22px">¥{{ waitPay.toFixed(2) }}</span>
        </p>
        <p @click="confrimOrder" style="border-radius: 25px">提交订单</p>
      </section>
      <transition name="fade">
        <div class="cover" v-if="showPayWay" @click="showPayWayFun"></div>
      </transition>
      <transition name="slid_up">
        <div class="choose_type_Container" v-if="showPayWay">
          <header>支付方式</header>
          <ul>
            <li class="choose">
              <span>微信支付</span>
              <!-- <svg class="address_empty_right">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                            </svg> -->
            </li>
          </ul>
        </div>
      </transition>
    </section>
    <loading v-if="showLoading"></loading>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from "vuex";
  import headTop from "src/components/header/head";
  import alertTip from "src/components/common/alertTip";
  import loading from "src/components/common/loading";
  import {
    Toast
  } from "vant";
  import {
    checkout,
    getAddress,
    placeOrders,
    getAddressList,
    getUserAddress,
    submitOrder,
  } from "src/service/getData";
  import {
    imgBaseUrl,
    myImgBaseUrl
  } from "src/config/env";

  export default {
    data() {
      return {
        myImgBaseUrl: null,
        geohash: "", //geohash位置信息
        shopId: null, //商店id值
        showLoading: true, //显示加载动画
        checkoutData: null, //数据返回值
        imgBaseUrl, //图片域名
        showPayWay: false, //显示付款方式
        payWayId: 1, //付款方式
        showAlert: false, //弹出框
        alertText: null, //弹出框内容
        inputInt: null,

        sendTime: null, //送达时间
        shopImg: null, //商店图片
        sendMoney: null, //配送费
        totalMoney: null, //总价格
        shopName: null, //商店名称
        foodList: [], //商品列表
      };
    },
    created() {
      //获取上个页面传递过来的geohash值
      this.geohash = "1";
      //获取上个页面传递过来的shopid值
      this.shopId = this.$route.query.shopId;
      this.sendTime = this.$route.query.time;
      this.shopImg = this.$route.query.shopImg;
      this.sendMoney = this.$route.query.sendMoney;
      this.shopName = this.$route.query.shopName;
      this.totalMoney = this.$route.query.totalMoney;
      this.myImgBaseUrl = myImgBaseUrl;
      // this.INIT_BUYCART();
      this.SAVE_SHOPID(this.shopId);
    },
    mounted() {
      if (this.geohash) {
        this.initData();
        this.SAVE_GEOHASH(this.geohash);
      }
    },
    components: {
      headTop,
      alertTip,
      loading,
    },
    computed: {
      ...mapState([
        "cartList",
        "remarkText",
        "inputText",
        "invoice",
        "choosedAddress",
        "userInfo",
      ]),
      waitPay() {
        return Number(this.totalMoney);
      },
      //备注页返回的信息进行处理
      remarklist: function() {
        let str = new String();
        if (this.remarkText) {
          Object.values(this.remarkText).forEach((item) => {
            str += item[1] + "，";
          });
        }
        //是否有自定义备注，分开处理
        if (this.inputText) {
          return str + this.inputText;
        } else {
          return str.substr(0, str.lastIndexOf("，"));
        }
      },
    },
    methods: {
      ...mapMutations([
        "INIT_BUYCART",
        "SAVE_GEOHASH",
        "CHOOSE_ADDRESS",
        "NEED_VALIDATION",
        "SAVE_CART_ID_SIG",
        "SAVE_ORDER_PARAM",
        "ORDER_SUCCESS",
        "SAVE_SHOPID",
      ]),
      ...mapActions(["defaultAddress"]),
      //初始化数据
      async initData() {
        this.foodList = JSON.parse(this.$route.query.list);
        this.showLoading = false;
      },
      //获取自己的地址
      // async getAddres() {
      //     let res = await getUserAddress()
      //     if (this.choosedAddress) return
      //     let item = res.data[0]
      //     let index = 0
      //     this.CHOOSE_ADDRESS({item, index});
      // },

      //显示付款方式
      showPayWayFun() {
        this.showPayWay = !this.showPayWay;
      },
      //选择付款方式
      choosePayWay(is_online_payment, id) {
        if (is_online_payment) {
          this.showPayWay = !this.showPayWay;
          this.payWayId = id;
        }
      },
      //地址备注颜色
      iconColor(name) {
        switch (name) {
          case "公司":
            return "#4cd964";
          case "学校":
            return "#3190e8";
        }
      },
      //确认订单
      async confrimOrder() {
        // if (!this.choosedAddress) {
        //   this.showAlert = true;
        //   this.alertText = "请添加一个收货地址";
        //   return;
        // }
        let value = [];
        for (let i = 0; i < this.foodList.length; i++) {
          let item = [
            Number(this.foodList[i].id),
            this.foodList[i].num,
            Number(this.foodList[i].price),
          ];
          value[i] = item;
        }

        submitOrder(
            this.$store.state.uid,
            Number(this.totalMoney),
            this.inputInt ? this.inputInt : "",
            JSON.stringify(value),
            1
          )
          .then((res) => {
            if(res.code==1){
              Toast.success("下单成功");
              this.$router.push("/order");
            }else{
             Toast.fail(res.msg);
            }

          })
          .catch(function(error) {
            Toast.fail("该商户暂停营业");
          });
      },
    },
  };
</script>
<style lang="scss">
  .van-dialog__content {
    padding: 1rem;
    box-sizing: border-box;
  }

  .van-field,
  .van-cell {
    padding: 1rem 0 0 0 !important;
    box-sizing: border-box;
  }

  .van-dialog__confirm {
    background: #01b6fd !important;

    .van-button__text {
      color: white;
    }
  }

  .van-toast__text,
  .van-icon {
    color: white;
  }
</style>
<style lang="scss" scoped>
  @import "src/style/mixin";

  .van-icon,
  .van-toast__text {
    color: white;
  }

  .confirmOrderContainer {
    padding-top: 1.95rem;
    padding-bottom: 3rem;

    p,
    span {
      font-family: Helvetica Neue, Tahoma, Arial;
    }
  }

  .container_style {
    background-color: #fff;
    margin-top: 0.4rem;
    padding: 0 0.7rem;

    .int {
      display: flex;
      flex-direction: column;
      padding: 0.7rem 0;

      .intTitle {
        width: 100%;
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
      }

      .intTextArea {
        width: 100%;
        height: 3rem;
      }
    }
  }

  .address_container {
    min-height: 3.5rem;
    @include fj;
    align-items: center;
    padding: 0 0.6rem;
    background: url(../../images/address_bottom.png) left bottom repeat-x;
    background-color: #fff;
    background-size: auto 0.12rem;

    .address_empty_left {
      display: flex;
      align-items: center;

      .location_icon {
        @include wh(0.8rem, 0.8rem);
        fill: $blue;
        margin-right: 0.2rem;
      }

      .add_address {
        @include sc(0.7rem, #333);
      }

      .address_detail_container {
        margin-left: 0.2rem;

        header {
          @include sc(0.65rem, #333);

          span:nth-of-type(1) {
            font-size: 0.8rem;
            font-weight: bold;
          }
        }

        .address_detail {
          width: 100%;
          display: flex;
          align-items: center;

          span {
            @include sc(0.5rem, #fff);
            border-radius: 0.15rem;
            background-color: #ff5722;
            height: 0.6rem;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            margin-right: 0.3rem;
          }

          p {
            @include sc(0.55rem, #777);
          }
        }
      }
    }
  }

  .address_empty_right {
    @include wh(0.6rem, 0.6rem);
    fill: #999;
  }

  .delivery_model {
    border-left: 0.2rem solid $blue;
    min-height: 4rem;
    @include fj;
    align-items: center;

    .deliver_text {
      @include sc(0.8rem, #333);
      font-weight: bold;
      padding-left: 0.3rem;
    }

    .deliver_time {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      p:nth-of-type(1) {
        @include sc(0.7rem, $blue);
      }

      p:nth-of-type(2) {
        @include sc(0.5rem, #fff);
        // background-color: $blue;
        width: 2.4rem;
        margin-top: 0.8rem;
        text-align: center;
        border-radius: 0.12rem;
        padding: 0.1rem;
      }
    }
  }

  .pay_way {
    .header_style {
      @include fj;
      line-height: 2rem;

      span:nth-of-type(1) {
        @include sc(0.7rem, #666);
      }

      .more_type {
        span:nth-of-type(1) {
          @include sc(0.6rem, #aaa);
          width: 10rem;
          display: inline-block;
          text-align: right;
          vertical-align: middle;
        }

        svg {
          @include wh(0.5rem, 0.5rem);
          fill: #ccc;
        }
      }
    }

    .hongbo {
      @include fj;
      border-top: 0.025rem solid #f5f5f5;

      span {
        @include sc(0.6rem, #aaa);
        line-height: 2rem;

        svg {
          @include wh(0.5rem, 0.5rem);
          vertical-align: middle;
          fill: #ccc;
        }
      }

      span:nth-of-type(2) {
        color: #aaa;
      }
    }

    .support_is_available {
      span {
        color: #666;
      }
    }
  }

  .food_list {
    background-color: #fff;
    margin-top: 0.4rem;

    header {
      padding: 0.7rem;
      border-bottom: 0.025rem solid #f5f5f5;

      img {
        @include wh(1.2rem, 1.2rem);
        vertical-align: middle;
      }

      span {
        @include sc(0.8rem, #333);
      }
    }

    .food_list_ul {
      padding-top: 0.5rem;
    }

    .food_item_style {
      @include fj;
      line-height: 1.8rem;
      padding: 0 0.7rem;

      span,
      p {
        @include sc(0.65rem, #666);
      }

      .food_name {
        width: 60%;
      }

      .num_price {
        flex: 1;
        @include fj;

        // display: flex;
        // justify-content: flex-end;
        // align-items: center;
        span:nth-of-type(1) {
          color: #f60;
        }

        .totalMoney {
          display: block;
          width: 150px;
          text-align: right;
        }
      }
    }

    .total_price {
      border-top: 0.025rem solid #f5f5f5;
    }
  }

  .confrim_order {
    background-color: #fff;
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2rem;

    p {
      line-height: 2rem;
      @include sc(0.75rem, #fff);
    }

    p:nth-of-type(1) {
      flex: 5;
      padding-left: 0.7rem;
      width: 2rem;
      // background-color: #4cd964;
    }

    p:nth-of-type(2) {
      flex: 2;
      // margin-top: 0.3rem;
      // margin-bottom: 0.2rem;
      background-color: #01b6fd;
      text-align: center;
    }
  }

  .cover {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 203;
  }

  .choose_type_Container {
    min-height: 10rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 204;

    header {
      background-color: #fafafa;
      @include sc(0.7rem, #333);
      text-align: center;
      line-height: 2rem;
    }

    ul {
      li {
        @include fj;
        padding: 0 0.7rem;
        line-height: 2.5rem;
        align-items: center;

        span {
          @include sc(0.7rem, #ccc);
        }

        svg {
          @include wh(0.8rem, 0.8rem);
          fill: #eee;
        }
      }

      .choose {
        span {
          color: #333;
        }

        svg {
          fill: #4cd964;
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }

  .slid_up-enter-active,
  .slid_up-leave-active {
    transition: all 0.3s;
  }

  .slid_up-enter,
  .slid_up-leave-active {
    transform: translate3d(0, 10rem, 0);
  }

  .router-slid-enter-active,
  .router-slid-leave-active {
    transition: all 0.4s;
  }

  .router-slid-enter,
  .router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
